<style lang='less'>
  .account-info-vue {
  padding: 30px 30px 30px 0;
  max-width: 500px;
}
</style>
<template>
  <div class="account-info-vue">
    <Form :model="account" :rules="rules" ref="form" showErrorTip>
      <FormItem label="头像" prop="avatar">
        <Avatar :src="account.avatar" :width="60"></Avatar>
      </FormItem>
      <FormItem label="昵称" prop="nickname">
        <input type="text" v-model="account.nickname" />
      </FormItem>
      <FormItem label="手机号" prop="mobile">
        <textarea v-autosize v-model="account.mobile" />
        </FormItem>
      <FormItem label="邮箱" prop="email">
        <input type="text" v-model="account.email"/>
      </FormItem>
      <FormItem label="" prop="location">
        <Button color="primary" @click="save" :loading="saveloading">保存</Button>
        <Button @click="reset">重置</Button>
      </FormItem>
    </Form>
  </div>
</template>
<script>

export default {
  data() {
    return {
      rules: {
        required: ['email'],
        email: ['email']
      },
      options: {
        max_file_size: '1mb',
        filters: {
          mime_types: [
            { title: 'Image files', extensions: 'jpg,gif,png' }
          ]
        }
      },
      saveloading: false
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {

    },
    save() {
      if (!this.$refs.form.valid().result) return;
      this.saveloading = true;
    },
    reset() {
      this.$refs.form.reset();
    }
  },
  computed: {
    account() {
      return this.$cloud.userInfo();
    }
  }
};
</script>
